<script>
import { identity } from '@/util/identity.js'
import Loader from '@/components/Loader/Loader.vue'
export default {
  components: { Loader },
  data() {
    return {
      currentIdentity: identity.getIdentity(),
      identities: [],
      loading: true,
    };
  },
  methods: {
    async loadIdentities() {
      try {
        const options = await identity.getAvailableIdentities();
        this.identities = options;
      } catch (e) {
        console.error('load identities failed:', e);
      } finally {
        this.loading = false;
      }
    },
    async onChoose(target) {
      if (target === this.currentIdentity) return;
      this.loading = true;
      try {
        const ok = await identity.setIdentity(target);
        if (ok) {
          this.currentIdentity = target;
          uni.showToast({ title: '切换成功', icon: 'success' });
        }
      } catch (e) {
        console.error('set identity failed:', e);
      } finally {
        this.loading = false;
      }
    },
    nameOf(id) {
      return identity.IDENTITY_NAMES[id] ?? '';
    }
  },
  mounted() {
    this.loadIdentities();
  }
}
</script>

<template>
  <Loader :loading="loading">
    <view class="group_1">
      <view class="card">
        <view class="list">
          <view v-for="id in identities" :key="id" class="item" :class="{ active: id === currentIdentity }"
            @click="onChoose(id)">
            <text class="label">{{ nameOf(id) }}</text>
            <text v-if="id === currentIdentity" class="tag">当前</text>
          </view>
        </view>
      </view>
    </view>
  </Loader>

</template>

<style scoped>
.group_1 {
  padding: 34rpx 36rpx 0 36rpx;
}

.card {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 24rpx;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx;
  background: #fff;
  border-radius: 16rpx;
  border: 4rpx solid transparent;
}

.item.active {
  border-color: #F26A77;
}

.label {
  font-size: 30rpx;
  color: #333;
}

.tag {
  font-size: 24rpx;
  color: #F26A77;
}
</style>


<style>
page {
  background-color: #f5f5f5;
}
</style>